<template>
  <Card>
    <div style="height:280px;width:100%;backgrond:red;" ref="domRef"></div>
  </Card>
</template>
<script>
import { getCurDataList } from "@/api";
function getData(arr, num) {
  let res = {},
    otherArr = arr.filter(t => t.type === num);
  if (otherArr.length > 0) {
    res.value = otherArr.map(t => t.value);
    res.name = otherArr.map(t => t.des)[0];
  } else {
    res.value = [];
    res.name = null;
  }
  return res;
}
export default {
  props: ["id", "deviceId"],
  watch: {
    id(newValue, value) {
      if (newValue !== value) {
        this.init();
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const vm = this;
      if (!vm.deviceId) return;
      // 探测器电流图 9 开头的
      if (vm.deviceId.startsWith(9)) {
        this.tanCeQi();
      } else {
        this.putong();
      }
    },

    tanCeQi() {
      const vm = this;
      if (vm.hideBottom) return false;
      const params = { deviceId: vm.id };
      const moment = vm.moment;
      let options = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },
        color: [
          "#60acfc",
          "#32d3eb",
          "#5bc49f",
          "#feb64d",
          "#ff7c7c",
          "#9287e7",
          "#668ED6",
          "#B55CBD"
        ],
        grid: {
          left: "4%",
          right: "4%",
          bottom: 10,
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          name: "mA",
          type: "value"
        },
        series: []
      };

      getCurDataList(params).then(res => {
        if (res.code !== 200 || res.data.length === 0) {
          vm.$nextTick(() => {
            vm.chartLeft = vm.echarts.init(vm.$refs["domRef"]);
            vm.chartLeft.showLoading({
              text: "加载中ing"
            });
            vm.chartLeft.clear();
            vm.chartLeft.setOption({
              title: {
                text: "暂无数据",
                textStyle: {
                  fontWeight: "bold",
                  fontSize: 28
                },
                left: "center",
                top: "center"
              }
            });
            vm.chartLeft.hideLoading();
          });
          return false;
        }
        let resData = res.data;

        let d1 = getData(resData, 101),
          d2 = getData(resData, 102),
          d3 = getData(resData, 103),
          d4 = getData(resData, 104),
          d5 = getData(resData, 105),
          d6 = getData(resData, 106),
          d7 = getData(resData, 107),
          d8 = getData(resData, 108);
        let t1 = res.data
            .filter(t => t.type === 101)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t2 = res.data
            .filter(t => t.type === 102)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t3 = res.data
            .filter(t => t.type === 103)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t4 = res.data
            .filter(t => t.type === 104)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t5 = res.data
            .filter(t => t.type === 105)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t6 = res.data
            .filter(t => t.type === 106)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t7 = res.data
            .filter(t => t.type === 107)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            }),
          t8 = res.data
            .filter(t => t.type === 108)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });

        let arr1 = [],
          arr2 = [],
          arr3 = [],
          arr4 = [],
          arr5 = [],
          arr6 = [],
          arr7 = [],
          arr8 = [];

        let setMap = new Set([
          ...t1,
          ...t2,
          ...t3,
          ...t4,
          ...t5,
          ...t6,
          ...t7,
          ...t8
        ]);
        const newArray = Array.from(setMap).sort();

        if (d1.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t1.indexOf(t) == -1) {
              arr1[i] = null;
            } else {
              arr1[i] = d1.value[t1.indexOf(t)];
            }
          });
          var ser1 = {
            name: d1.name,
            type: "line",
            smooth: true,
            data: arr1,
            connectNulls: true
          };
          options.series.push(ser1);
          options.legend.data.push(d1.name);
        }

        if (d2.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t2.indexOf(t) == -1) {
              arr2[i] = null;
            } else {
              arr2[i] = d2.value[t2.indexOf(t)];
            }
          });
          var ser2 = {
            name: d2.name,
            type: "line",
            smooth: true,
            connectNulls: true,
            data: arr2
          };
          options.series.push(ser2);
          options.legend.data.push(d2.name);
        }

        if (d3.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t3.indexOf(t) == -1) {
              arr3[i] = null;
            } else {
              arr3[i] = d3.value[t3.indexOf(t)];
            }
          });
          var ser3 = {
            name: d3.name,
            type: "line",
            smooth: true,
            connectNulls: true,
            data: arr3
          };
          options.series.push(ser3);
          options.legend.data.push(d3.name);
        }

        if (d4.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t4.indexOf(t) == -1) {
              arr4[i] = null;
            } else {
              arr4[i] = d4.value[t4.indexOf(t)];
            }
          });
          var ser4 = {
            name: d4.name,
            type: "line",
            connectNulls: true,
            smooth: true,
            data: arr4
          };
          options.series.push(ser4);
          options.legend.data.push(d4.name);
        }

        if (d5.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t5.indexOf(t) == -1) {
              arr5[i] = null;
            } else {
              arr5[i] = d5.value[t5.indexOf(t)];
            }
          });
          var ser5 = {
            name: d5.name,
            type: "line",
            connectNulls: true,
            smooth: true,
            data: arr5
          };
          options.series.push(ser5);
          options.legend.data.push(d5.name);
        }

        if (d6.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t6.indexOf(t) == -1) {
              arr6[i] = null;
            } else {
              arr6[i] = d6.value[t6.indexOf(t)];
            }
          });
          var ser6 = {
            name: d6.name,
            type: "line",
            connectNulls: true,
            smooth: true,
            data: arr6
          };
          options.series.push(ser6);
          options.legend.data.push(d6.name);
        }

        if (d7.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t7.indexOf(t) == -1) {
              arr7[i] = null;
            } else {
              arr7[i] = d7.value[t7.indexOf(t)];
            }
          });
          var ser7 = {
            name: d7.name,
            type: "line",
            connectNulls: true,
            smooth: true,
            data: arr7
          };
          options.series.push(ser7);
          options.legend.data.push(d7.name);
        }

        if (d8.value.length > 0) {
          newArray.forEach((t, i) => {
            if (t8.indexOf(t) == -1) {
              arr8[i] = null;
            } else {
              arr8[i] = d8.value[t8.indexOf(t)];
            }
          });
          var ser8 = {
            name: d8.name,
            type: "line",
            connectNulls: true,
            smooth: true,
            data: arr8
          };
          options.series.push(ser8);
          options.legend.data.push(d8.name);
        }

        options.xAxis.data = newArray;
        vm.$nextTick(() => {
          vm.chartLeft = vm.echarts.init(vm.$refs["domRef"]);
          vm.chartLeft.showLoading({
            text: "加载中ing"
          });
          vm.chartLeft.clear();
          vm.chartLeft.setOption(options, true);
          vm.chartLeft.hideLoading();
        });
      });
    },

    putong(collectType) {
      const vm = this;
      const deviceId = vm.id;
      const moment = vm.moment;
      const params = { deviceId };
      const options = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },

        grid: {
          left: "4%",
          right: "4%",
          bottom: 10,
          containLabel: true
        },

        color: [
          "#60acfc",
          "#32d3eb",
          "#5bc49f",
          "#feb64d",
          "#ff7c7c",
          "#9287e7",
          "#668ED6",
          "#B55CBD"
        ],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: []
      };

      getCurDataList(params).then(res => {
        if (res.code !== 200 || res.data.length === 0) {
          vm.$nextTick(() => {
            vm.chartLeft = vm.echarts.init(vm.$refs["domRef"]);
            vm.chartLeft.showLoading({
              text: "加载中ing"
            });
            vm.chartLeft.clear();
            vm.chartLeft.setOption(
              {
                title: {
                  text: "暂无数据",
                  textStyle: {
                    fontWeight: "bold",
                    fontSize: 28
                  },
                  left: "center",
                  top: "center"
                }
              },
              true
            );
            vm.chartLeft.hideLoading();
          });
          return false;
        }
        let ser1 = {
          name: "A相电流(A)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 12)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        let ser2 = {
          name: "B相电流(A)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 13)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        let ser3 = {
          name: "C相电流(A)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 14)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        let ser4 = {
          name: "零线电流(A)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 15)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        if (ser1.data && ser1.data.length > 0) {
          options.series.push(ser1);
          options.legend.data.push("A相电流(A)");
        }

        if (ser2.data && ser2.data.length > 0) {
          options.series.push(ser2);
          options.legend.data.push("B相电流(A)");
        }

        if (ser3.data && ser3.data.length > 0) {
          options.series.push(ser3);
          options.legend.data.push("C相电流(A)");
        }

        if (ser4.data && ser4.data.length > 0) {
          options.series.push(ser4);
          options.legend.data.push("零线电流(A)");
        }

        if (res.data && res.data.length > 0) {
          const type = res.data[0].type;
          options.xAxis.data = res.data
            .filter(t => t.type === type)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });
        }

        vm.$nextTick(() => {
          vm.chartLeft = vm.echarts.init(vm.$refs["domRef"]);
          vm.chartLeft.showLoading({
            text: "加载中ing"
          });
          vm.chartLeft.clear();
          vm.chartLeft.setOption(options, true);
          vm.chartLeft.hideLoading();
        });
      });
    }
  }
};
</script>
